<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<view class="container">
		<view class="scroll-view-container">
			<!-- 左侧滑动区 -->
			<scroll-view class="left-scroll-view" scroll-y="true" :style="{height:wh + 'px'}">
				<block v-for="(item,i) in cateList" :key="item.id">
					<view :class="['left-scroll-view-item', item.id === active ? 'active':'']"
						@click="activeChange(item.id)">{{item.name}}
					</view>
				</block>


			</scroll-view>
			<!-- 右侧滑动区 -->
			<scroll-view scroll-y="true" :style="{height:wh + 'px',backgroundColor:'#fff'}" :scroll-top="scorllTop">
				<template v-if="goodsList.length > 0">
					<view class="goods-show" v-for="item in goodsList" :key="item.id">
						<view class="goods-show-header">
							<image :src="imageSrc(item.multimediaUrl)" mode="aspectFill" class="goods-image"></image>
						</view>
						<view class="goods-show-body">
							<view class="goods-name">{{item.name}}</view>
							<view class="goods-price">{{priceTransform(item.price)}}</view>
						</view>
						<view class="goods-show-footer">
							<uni-number-box v-model="item.count" background="#1aad19" color="#000"
								@change="numberChange(item)" />
						</view>
					</view>
				</template>
				<view v-else class="no-data">
					没有数据
				</view>


				<!-- <uni-list>
					<block v-for="item in goodsList" :key="item.id">
						<uni-list-item>
							
							<template v-slot:header>
								
							</template>
							<template v-slot:body>
								<view class="goods-intro">
									<view class="goods-name">{{item.name}}</view>
									<view class="goods-price">{{priceTransform(item.price)}}</view>
								</view>
							</template>
							<template v-slot:footer>
								<uni-number-box v-model="item.count" background="#73f201" color="#000"
									@change="numberChange(item)" />
							</template>
						</uni-list-item>
					</block>
				</uni-list> -->




			</scroll-view>
		</view>
		<view class="goods-carts">
			<view class="goods-op">
				<button type="default" @click="showOrder">{{orderButtonGroup[0]}}</button>
			</view>
			<view class="goods-op">
				<button type="primary" @click="payNow">{{orderButtonGroup[1]}}</button>
			</view>

			<!-- <uni-goods-nav :fill="true " :options="[]" :buttonGroup="buttonGroup" @buttonClick="buttonClick" /> -->
		</view>




		<uni-popup ref="popup" type="bottom">

			<uni-section title="选择的商品" type="line">
				<scroll-view scroll-y="true" :style="{height:popHeight + 'px',backgroundColor:'#fff'}"
					:scroll-top="scorllTop">
					<view class="goods-show" v-for="item in selectGoodsList" :key="item.id">
						<view class="goods-show-header">
							<image :src="imageSrc(item.multimediaUrl)" mode="aspectFill" class="goods-image"></image>
						</view>
						<view class="goods-show-body">
							<view class="goods-name">{{item.name}}</view>
							<view class="goods-price">{{priceTransform(item.price)}}</view>
						</view>
						<view class="goods-show-footer">
							<uni-number-box v-model="item.count" background="#1aad19" color="#000"
								@change="numberChange(item)" />
						</view>
					</view>
					
					
					<!-- <uni-list>
						<block v-for="item in selectGoodsList" :key="item.id">
							<uni-list-item :title="item.name" :note="priceTransform(item.price)"
								:thumb="imageSrc(item.multimediaUrl)" thumb-size="lg">
								<template v-slot:footer>
									<uni-number-box v-model="item.count" background="#73f201" color="#000"
										@change="numberChange(item)" />
								</template>
							</uni-list-item>
						</block>
					</uni-list> -->
				</scroll-view>

			</uni-section>


		</uni-popup>

	</view>
</template>

<script>
	import {
		transform
	} from '@/minix/mixin.js'
	import {
		getShopGoodsCate,
		getShopGoodsByCateId,
		newOrder,
		newOrderInTable
	} from '@/api/consomer/orderin/orderin.js'


	export default {
		mixins: [transform],
		data() {
			return {
				wh: 0,
				popHeight: 0,
				cateList: [],
				goodsList: [],
				active: 0,
				cateLevel2: [],
				scorllTop: 0,
				shopId: '',
				shopName: '',
				tableId: '',
				cateGoodsMap: new Map(),
				selectGoods: new Map(),
				changeNum: 0,
				selectGoodsList: [],

				orderTotalPrice: -1,
				orderButtonGroup: [
					'订单', '结算'
				],

				buttonGroup: [{
						text: '订单',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: `结算`,
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				],
			};
		},
		onLoad: function(option) {
			this.shopId = option.shopId
			this.shopName = option.shopName
			this.tableId = option.tableId
			const sysInfo = uni.getSystemInfoSync()
			this.wh = sysInfo.windowHeight - 50
			this.popHeight = sysInfo.windowHeight * 0.4
			this.init()
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.shopName
			})
		},
		watch: {
			orderTotalPrice(newValue) {
				this.orderButtonGroup[1] = this.priceTransform(this.orderTotalPrice) + ' 结算'
				// this.buttonGroup[1].text = this.priceTransform(this.orderTotalPrice) + ' 下单'
			},
			immediate: true // watch侦听操作内的函数会立刻被执行
		},
		methods: {
			init() {
				this.orderTotalPrice = 0
				getShopGoodsCate(this.shopId).then(res => {
					this.cateList = res
					if (this.cateList.length > 0) {
						this.active = this.cateList[0].id
						this.activeChange(this.active)
					}
				})
			},
			activeChange(cateId) {
				this.active = cateId
				if (this.cateGoodsMap.has(cateId)) {
					return this.goodsList = this.cateGoodsMap.get(cateId)
				}
				getShopGoodsByCateId(cateId).then(res => {
					this.cateGoodsMap.set(cateId, res)
					this.goodsList = res
				})
			},
			numberChange(item) {
				this.changeNum++
				if (item.count > 0) {
					this.selectGoods.set(item.id, item)
				} else {
					this.selectGoods.delete(item.id)
				}
				this.orderTotalPrice = this.selectGoods.values().map(e => e.price * e.count)
					.reduce((total, num) => total + num, 0)
			},
			// buttonClick(e) {
			// 	if (e.index == 0) {
			// 		this.selectGoodsList = []
			// 		this.selectGoods.forEach(value => {
			// 			this.selectGoodsList.push(value)
			// 		})
			// 		this.$refs.popup.open('bootom')
			// 	} else {
			// 		this.payNow()
			// 	}
			// },
			showOrder() {
				this.selectGoodsList = []
				this.selectGoods.forEach(value => {
					this.selectGoodsList.push(value)
				})
				this.$refs.popup.open()
			},
			async payNow() {
				if (this.selectGoods.size > 0) {
					let selects = [...this.selectGoods.values()
						.filter(e => e.count > 0).map(e => {
							return {
								goodsId: e.id,
								goodsNum: e.count,
								buyPrice: e.price,
								weight: 0,
							}
						})
					]
					if (selects.length > 0) {
						let newOrderForm = {
							shopId: this.shopId,
							orderDetailBos: selects
						}
						uni.showLoading({
							title: '正在生成订单'
						})
						if (this.tableId) {
							newOrderForm.tableId = this.tableId
							let res = await newOrderInTable(newOrderForm)
							uni.hideLoading()
							this.selectGoodsList = []
							let orderId = res.id
							uni.redirectTo({
								url: '/subpkg/consumer/tableOrder/tableOrder?orderId=' + orderId
							})
						} else {
							let res = await newOrder(newOrderForm)
							uni.hideLoading()
							this.selectGoodsList = []
							let orderId = res.id
							uni.navigateTo({
								url: '/subpkg/consumer/orderDetail/orderDetail?id=' + orderId
							})
						}
					}
				} else {
					return uni.showToast({
						icon: 'error',
						title: '没有选择商品'
					})
				}
			}
		},
	};
</script>

<style lang="scss">
	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}

	.goods-show {
		display: flex;
		flex-direction: row;
		padding: 5px;
		    border-bottom: 1px solid #efefef;

		.goods-image {
			width: $goods-image;
			height: $goods-image;
			border-radius: 5px;
		}

		.goods-show-body {
			margin-left: 5px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
			flex: 1;
			.goods-name {
				font-weight: bold;
			}
		}

		.goods-show-footer {
			display: flex;
			justify-content: flex-end;
			flex-direction: column;
		}
	}
	.no-data{
		text-align: center;
	}





	.scroll-view-container {
		display: flex;

		.left-scroll-view {
			width: 120px;

			.left-scroll-view-item {
				background-color: #f7f7f7;
				line-height: 40px;
				text-align: center;
				font-size: 14px;

				&.active {
					background-color: #ffffff;
					position: relative;
					font-weight: bold;
					color: $base-color;

					&::after {
						content: ' ';
						display: block;
						width: 4px;
						height: 40px;
						background-color: $base-color;
						position: absolute;
						top: 50%;
						right: 0;
						transform: translateY(-50%);
					}
				}
			}
		}
	}

	.fixed-area {
		position: fixed;
		bottom: 50px;
		width: 100%;
		height: 50px;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.order-area {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-left: 20px;
			font-size: 16px;
			color: #333;

			.pay-right-now-btn {
				background-color: #73f201;
				padding: 5px 20px;
				border-radius: 5px;
				margin: 0 10px;
			}

		}

	}

	.shop-content {
		.shop-item {
			padding: 10px;
			display: flex;
			flex-direction: row;
			margin-bottom: 10px;

			.goods-image {
				width: 70px;
				height: 70px;
			}

			.goods-intro {
				margin-left: 5px;
				flex: 1;
				display: flex;
				flex-direction: column;

				.goods-name {
					font-size: 14px;
					font-weight: bold;
				}

				.goods-guige {
					font-size: 12px;
					color: #a5a099;
				}

			}

			.goods-num {
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				align-items: flex-end;
			}
		}
	}

	.goods-carts {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;

		.goods-op {
			flex: 1;
			padding: 2px 10px;
		}

		&:first-child {
			color: $base-color;
		}
	}
</style>